<template>
  <div class="user-view-container">
    <div class="view-root">
      <el-container class="container">
        <el-header class="header">
          <div class="title-area video-search-area">
            <div class="label">用户名：</div>
            <el-input class="ipt" v-model="searchData.username"></el-input>
          </div>
          <div class="description-area video-search-area">
            <div class="label">昵称：</div>
            <el-input class="ipt" v-model="searchData.nickname"></el-input>
          </div>
          <div class="description-area video-search-area">
            <div class="label">手机号：</div>
            <el-input class="ipt" v-model="searchData.phone"></el-input>
          </div>
          <div class="description-area video-search-area">
            <div class="label">邮箱：</div>
            <el-input class="ipt" v-model="searchData.email"></el-input>
          </div>
          <div class="label-area video-search-area">
            <div class="label">性别：</div>
            <el-select clearable v-model="searchData.sex" placeholder="" style="width: 240px">
              <el-option
                  key="boy"
                  label="男"
                  value="boy"
              />
              <el-option
                  key="girl"
                  label="女"
                  value="girl"
              />
            </el-select>
          </div>
          <el-button class="search-btn" type="primary" @click="loadUserPage">
            <el-icon><Search /></el-icon>
          </el-button>
          <el-button class="search-btn" type="success" @click="exportUserList()">
            导出
          </el-button>
        </el-header>
        <el-main class="main">
          <el-table :data="viewData.userList" class="table" width="100%">
            <el-table-column prop="id" label="ID" width="50" />
            <el-table-column prop="avatar" label="头像" width="150">
              <template #default="scope">
                <div>
                  <img style="width: 100%;
                              height: 100%;
                              object-fit: cover;
                            "
                       :src="scope.row.avatar"
                       alt="">
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="username" label="用户名" width="150" />
            <el-table-column prop="nickname" label="昵称" width="150" />
            <el-table-column prop="password" label="密码" width="150"/>
            <el-table-column prop="phone" label="手机号" width="150" />
            <el-table-column prop="email" label="邮箱" width="150"/>
            <el-table-column prop="sex" label="性别" width="80" />
            <el-table-column prop="createTime" label="注册时间" width="200" />
            <el-table-column label="操作" width="280">
              <template #default="scope">
                <el-button type="success" @click="openUpdateDialog(scope.row)">修改</el-button>
                <el-button type="danger" @click="deleteUser(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
              class="pagination"
              background
              layout="total, sizes, prev, pager, next, jumper"
              :total="viewData.total"
              v-model:page-size="viewData.size"
              v-model:current-page="viewData.current"
              :page-count="viewData.pages"
          />

          <!--     对话框     -->
          <!--     修改对话框     -->
          <el-dialog v-model="updateDialog.visible" title="修改视频" width="500">
            <el-form :model="updateDialog.form">
              <el-form-item label="ID：" :label-width="updateDialog.formLabelWidth">
                <el-input v-model="updateDialog.form.id" autocomplete="off" disabled/>
              </el-form-item>
              <el-form-item label="用户名：" :label-width="updateDialog.formLabelWidth">
                <el-input clearable v-model="updateDialog.form.username" autocomplete="off" disabled/>
              </el-form-item>
              <el-form-item label="昵称：" :label-width="updateDialog.formLabelWidth">
                <el-input clearable v-model="updateDialog.form.nickname" autocomplete="off" />
              </el-form-item>
              <el-form-item label="密码：" :label-width="updateDialog.formLabelWidth">
                <el-input clearable v-model="updateDialog.form.password" autocomplete="off" />
              </el-form-item>
              <el-form-item label="手机号：" :label-width="updateDialog.formLabelWidth">
                <el-input clearable v-model="updateDialog.form.phone" autocomplete="off" />
              </el-form-item>
              <el-form-item label="邮箱：" :label-width="updateDialog.formLabelWidth">
                <el-input clearable v-model="updateDialog.form.email" autocomplete="off" />
              </el-form-item>
              <el-form-item label="性别：" :label-width="updateDialog.formLabelWidth">
                <el-select v-model="updateDialog.form.sex" placeholder="" style="width: 240px">
                  <el-option
                      key="boy"
                      label="男"
                      value="boy"
                  />
                  <el-option
                      key="girl"
                      label="女"
                      value="girl"
                  />
                </el-select>
              </el-form-item>
            </el-form>
            <template #footer>
              <div class="dialog-footer">
                <el-button @click="closeUpdateDialog">取消</el-button>
                <el-button type="primary" @click="updateUser">
                  确认
                </el-button>
              </div>
            </template>
          </el-dialog>

        </el-main>
      </el-container>
    </div>
  </div>
</template>
<script>

import {deleteUserApi, updateUserInfoApi, getUserPageApi, getUserInfoApi, exportUserListApi} from "@/api/user-api.js";

export default {
  name: "UserView",
  components: {},
  data() {
    return {
      searchData: {
        sex: '',
        nickname: '',
        username: '',
        videoStatus: '',
        phone: '',
        pageNum: 1,
        pageSize: 5,
      },
      viewData: {
        total: 1000, //  数据库中的总数据量
        size: 10, //  每页显示的条数
        current: 1, //  当前页码
        pages: 200,  //  总页数
        //  用户列表
        userList: [
          {
            id: '1',
            username: '喜剧之王',
            nickname: '',
            password: '',
            sex: '',
            createTime: '2022-01-01 00:00:00',
          },
        ],
      },

      //  新增对话框
      updateDialog: {
        visible: false,
        formLabelWidth: '140px',
        form: {
          id: '',
          username: '',
          nickname: '',
          password: '',
          phone: '',
          sex: '',
          email: '',
        },
      },
    }
  },
  methods: {
    exportUserList() {
      exportUserListApi()
    },
    //  加载用户分页
    async loadUserPage() {
      this.searchData.pageNum = this.viewData.current
      this.searchData.pageSize = this.viewData.size
      console.log('检索数据', this.searchData)
      let data = await getUserPageApi(this.searchData)
      if (data.code === 200) {
        data = data.data
        this.viewData.userList = data.records
        this.viewData.total = data.total
        this.viewData.pages = data.pages
        this.viewData.size = data.size
        this.viewData.current = data.current
      }

    },
    //  打开更新对话框
    openUpdateDialog(row) {
      console.log( "点击的行数据", row)
      //  同步数据到对话框
      this.updateDialog.form = {
        id: row.id,
        username: row.username,
        nickname: row.nickname,
        password: row.password,
        phone: row.phone,
        sex: row.sex,
        email: row.email,
        address: row.address,
      }
      this.updateDialog.visible = true
    },
    //  关闭更新对话框
    closeUpdateDialog() {
      this.updateDialog.visible = false
      this.updateDialog.form = {}
    },
    //  更新用户
    async updateUser() {
      //  更新用户
      await updateUserInfoApi(this.updateDialog.form)
      //  关闭对话框
      this.closeUpdateDialog()
      //  加载用户列表
      await this.loadUserPage()
    },
    async deleteUser(row) {
      //  删除用户
      await deleteUserApi(row.id)
      //  加载用户列表
      await this.loadUserPage()
    },
  },
  mounted() {
    //  加载视频列表
    this.loadUserPage()
  },
  watch: {
    'viewData.current'(newValue, oldValue) {
      this.loadUserPage()
    },
    'viewData.size'(newValue, oldValue) {
      this.loadUserPage()
    }
  },
}
</script>
<style scoped lang="scss">
@use "user-view";
</style>
